<template>
  <div style="height:100%;">
    <div class="Login_Bg_Div" v-show="IsShow">
      <div class="Login_Form_Div">
        <span style="font-size:13px;line-height: 13px;">HR高级人事管理系统</span>
        <el-form ref="UserInfo" :rules="rules" :model="UserInfo" label-width="80px">
          <el-row>
            <el-col :span="1"><br></el-col>
            <el-col :span="22">
              <el-input suffix-icon="el-icon-user-solid" v-model="UserInfo.UserName" placeholder="用户名"
                style="width:350px;"></el-input>
              <br>
            </el-col>
            <el-col :span="1"><br></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><br></el-col>
            <el-col :span="22">
              <el-input v-model="UserInfo.Password" style="width:350px;" placeholder="密码" show-password></el-input><br>
            </el-col>
            <el-col :span="1"><br></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><br></el-col>
            <el-col :span="22">
              <div style="padding-left:5px;">
                <el-input style="width:205px;" v-model="inputInfo" placeholder="验证码"></el-input>
                <div
                  style="float:right;margin:1px 5px 1px;width:140px;font-size:17px;background:#D2D6DE;line-height:38px;margin-top:10px;color:#6E6F7A;"
                  @click="createCode">
                  {{verificationCode}}
                </div>
              </div>
            </el-col>
            <el-col :span="1"><br></el-col>
          </el-row>
          <el-form-item label-width="30px" style="text-align:right;padding-right:22px;padding-top:3px;">
            <div>
              <div style="float:left;">
                <el-checkbox label="记住我"></el-checkbox>
              </div>
              <el-button style="width:130px" type="primary" @click="confirmTheCode" size="medium">登录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.code-box {
  margin-top: 50px;
  text-align: center;
}
.code-style {
  font-size: 16px;
  color: red;
  cursor: pointer;
}
.confirm-botton {
  display: inline-block;
  width: 50px;
  background-color: #04b4ba;
  font-size: 16px;
  line-height: 32px;
  cursor: pointer;
}
//登录页面背景
.Login_Bg_Div {
  width: 100%;
  height: 100%;
  background-image: url("../images/Login/login_bg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
//登录框div
.Login_Form_Div {
  opacity: 0.9;
  width: 400px;
  height: 300px;
  background-color: white;
  border-radius: 8px;
  color: #808080;
  line-height: 60px;
  display: block;
  text-align: center;
  text-decoration: none;
  //margin: -150px 0 0 -200px;
  //position: absolute;
  //top: 50%;
  //left: 50%;
  margin-top: -80px;
}
</style>
<script>
export default {
  data () {
    return {
      UserInfo: {
        UserName: '',
        Password: ''
      },
      IsShow: true,
      rules: {
        UserName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        Password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      inputInfo: '',   //用户输入信息
      verificationCode: ''   //生成的验证码
    }
  },
  created () { },
  methods: {
    createCode: function () {    //通过随机数生成验证码
      this.verificationCode = '';
      var code = '';
      var Tips = '必须输入'
      var codeLength = 4;     //验证码长度
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
      for (var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random() * 36);
        code += random[index];
      }
      this.verificationCode = code
    },
    confirmTheCode () {

      var customerCode = this.inputInfo.toUpperCase();   //把你输入的小写转化为大写
      if (customerCode == 0) {
        this.createCode();
        this.inputInfo = ''
        this.$message.error('验证码不能为空');
      } else if (customerCode != this.verificationCode) {
        this.createCode();
        this.inputInfo = ''
        this.$message.error('验证码不正确，请重新输入');
      } else {
        this.$axios({
          url: '/HrApi/Login/GetUser',
          method: 'POST',
          data: this.$Qs.stringify({
            UserInfo: JSON.stringify(this.UserInfo)
          })
        }).then(res => {
          if (!res.data.code) {
            this.$message.success(res.data.msg)
            //this.$store.commit('SetUserInfo', res.data.data)
            //异步操作
            setTimeout(() => {
              this.$store.dispatch('SetUserInfo', res.data.data)
              this.$router.push('/');
            }, 500);
          } else {
            this.$message.error(res.data.msg);
          }
        })
      }
    }
  },
  mounted () {
    this.createCode()

  }
}
</script>